import Alert from "@mui/material/Alert";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import "./toast.less";
let timer: NodeJS.Timeout = setTimeout(() => {});
export default function Toast() {
  const dispath = useDispatch();
  // 获取三个数据
  const { toastShow, toastMessage, toastType } = useSelector(
    (state: IRootState) => state.toasStData
  );
  if (toastShow) {
    timer = setTimeout(() => {
      // 先把之前的定时器清除
      clearTimeout(timer);
      dispath({
        type: "HIDE_TOAST",
      });
    }, 2000);
  }
  return (
    // <div style={{ display: toastShow ? "block" : "none" }}>
    <div className="toast" style={{ display: toastShow ? "block" : "none" }}>
      <Alert severity={toastType}>{toastMessage}</Alert>
    </div>
    // </div>
  );
}
